<template>
	<view class="page">
		<template v-if="isLogin">
			<!-- 药剂管理详情 -->
			<template v-if="type==1">
				<template v-if="loadingState.default">
					<loading :loadingState="loadingState"></loading>
				</template>
				<template v-else>
					<view class="body"> 
						<view class="detail-wrap m-b2">
							<view class="hd-title">药剂参数</view>
							<view class="info">
								<view class="item">
									<view class="label">药剂名称：</view>
									<view>{{detail.potion.potion_name}}</view>
								</view>
								<view class="item">
									<view class="label">品 牌：</view>
									<view>{{detail.potion.potion_brand}}</view>
								</view>
								<view class="item">
									<view class="label">剂 型：</view>
									<view>{{detail.potion.type_name}}</view>
								</view>
								<view class="item">
									<view class="label">防控对象：</view>
									<view>{{detail.potion.fk_pest}}</view>
								</view>
								<view class="item">
									<view class="label">农业登记号：</view>
									<view>{{detail.potion.registration_No}}</view>
								</view>
								<view class="item">
									<view class="label">生产许可证：</view>
									<view>{{detail.potion.license_No}}</view>
								</view>
								<view class="item">
									<view class="label">农业标准号：</view>
									<view>{{detail.potion.standard_No}}</view>
								</view>
								<view class="item">
									<view class="label">药剂说明：</view>
									<view>{{detail.potion.potion_content}}</view>
								</view>
							</view>
						</view>
				
						<view class="detail-wrap m-b2">
							<view class="hd-title">包装照片</view>
							<view class="upload-pic-item">
								<view class="form-upload-pic">
									<view class="img-item" v-for="(item,index) in detail.files" :key="index">
										<image src="@/static/images/filter_bg.png" mode="widthFix" class="filter-bg">
											<!-- 占位 -->
										</image>
										<view class="img-wrap" @click="preview(index)">
											<image class="img" :src="img_path+item.file_path" mode="widthFix"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
						
					</view>
					
					<!-- 底部 -->
					<view class="footer">
						<navigator :url="'/package_yaoji/buyYaoJi/buyYaoJi?id='+id" hover-class="none" class="fix-wrap bottom">
							<view class="form-lay-btn">采购药剂</view>
						</navigator>
					</view>
				 
				</template>
			</template>
			
			
			<!-- 分配详情 -->
			<template v-if="type==2">
				<template v-if="loadingState.default">
					<loading :loadingState="loadingState"></loading>
				</template>
				<template v-else>
					<view class="body">
						<view class="detail-wrap m-b2"> 
							<view class="info">
								<view class="item">
									<view>[{{detail.distribute.f_realname}}] {{detail.distribute.fid==0?'采购':'分配给'}} [{{fp_company}}]</view> 
								</view>
								<view class="item">
									<view class="label">{{detail.distribute.fid==0?'采购':'分配'}}数量：</view>
									<view>{{detail.distribute.potion_sum}} {{detail.specs.pack_name}}</view>
								</view>
								<view class="item">
									<view class="label">剩余药量：</view>
									<view>{{detail.distribute.potion_sum-detail.potion.fp_sum-detail.potion.fk_sum}} {{detail.specs.pack_name}}</view>
								</view>
								<view class="item">
									<view class="label">{{detail.distribute.fid==0?'采购':'分配'}}时间：</view>
									<view>{{detail.distribute.create_time}}</view>
								</view>
							</view>
						</view>
				
						<view class="detail-wrap m-b2">
							<view class="hd-title">药剂参数</view>
							<view class="info">
								<view class="item">
									<view class="label">药剂名称：</view>
									<view>{{detail.potion.potion_name}}</view>
								</view>
								<view class="item">
									<view class="label">品 牌：</view>
									<view>{{detail.potion.potion_brand}}</view>
								</view>
								<view class="item">
									<view class="label">剂 型：</view>
									<view>{{detail.potion.type_name}}</view>
								</view>
								<view class="item">
									<view class="label">规 格：</view>
									<view>{{detail.specs.spec}}</view>
								</view>
								<view class="item">
									<view class="label">防控对象：</view>
									<view>{{detail.potion.fk_pest}}</view>
								</view>
								<view class="item">
									<view class="label">农业登记号：</view>
									<view>{{detail.potion.registration_No}}</view>
								</view>
								<view class="item">
									<view class="label">生产许可证：</view>
									<view>{{detail.potion.license_No}}</view>
								</view>
								<view class="item">
									<view class="label">农业标准号：</view>
									<view>{{detail.potion.standard_No}}</view>
								</view>
								<view class="item">
									<view class="label">药剂说明：</view>
									<view>{{detail.potion.potion_content}}</view>
								</view>
							</view>
						</view>
				
						<view class="detail-wrap m-b2">
							<view class="hd-title">包装照片</view>
							<view class="upload-pic-item">
								<view class="form-upload-pic">
									<view class="img-item" v-for="(item,index) in detail.files" :key="index">
										<image src="@/static/images/filter_bg.png" mode="widthFix" class="filter-bg">
											<!-- 占位 -->
										</image>
										<view class="img-wrap" @click="preview(index)">
											<image class="img" :src="img_path+item.file_path" mode="widthFix"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
				
						<view v-if="detail.fpInfo.length>0" class="detail-wrap m-b2">
							<view class="hd-title">分配总药剂量：{{detail.potion.fp_sum}} {{detail.specs.pack_name}}</view>
							<template v-if="detail.fpInfo.length>0">
								<view class="detail-item" v-for="(item,index) in detail.fpInfo" :key="index"> 
									<view class="detail-input">
										<view class="content">
											<view class="val">{{item.realname}}: {{item.potion_sum}}{{detail.specs.pack_name}}</view>
										</view>
									</view>
								</view> 
							</template>						
						</view>
						
						<view v-if="detail.fk.length>0" class="detail-wrap">
							<view class="hd-title">防控总用药量：{{detail.potion.fk_sum}} {{detail.specs.pack_name}}</view> 
							<template v-if="detail.fk.length>0">
								<view class="detail-item" v-for="(item,index) in detail.fk" :key="index"> 
									<view class="detail-input">
										<view class="content">
											<view class="val">{{item.realname}}: {{item.potion_sum}}{{detail.specs.pack_name}}</view>
										</view>
									</view>
								</view> 
							</template>	
						</view>
				
					</view>
				 
				</template>
			</template>
			
			<!-- 我的药剂详情 -->
			<template v-if="type==3">
				<template v-if="loadingState.default">
					<loading :loadingState="loadingState"></loading>
				</template>
				<template v-else>
					<view class="body"> 
						<view class="detail-wrap m-b2">
							<view class="info">
								<view class="item">
									<view class="label">[{{detail.distribute.f_realname}}] {{detail.distribute.fid==0?'采购':'分配'}} </view>
									<view>{{detail.distribute.potion_sum}} {{detail.specs.pack_name}}</view>
								</view>
								<view class="item">
									<view class="label">剩余药量：</view>
									<view>{{detail.distribute.potion_sum-detail.potion.fp_sum-detail.potion.fk_sum}} {{detail.specs.pack_name}}</view>
								</view>
								<view class="item">
									<view class="label">采购时间：</view>
									<view>{{detail.distribute.create_time}}</view>
								</view>
							</view>
						</view>
						
						<view class="detail-wrap m-b2">
							<view class="hd-title">药剂参数</view>
							<view class="info">
								<view class="item">
									<view class="label">药剂名称：</view>
									<view>{{detail.potion.potion_name}}</view>
								</view>
								<view class="item">
									<view class="label">品 牌：</view>
									<view>{{detail.potion.potion_brand}}</view>
								</view>
								<view class="item">
									<view class="label">剂 型：</view>
									<view>{{detail.potion.type_name}}</view>
								</view>
								<view class="item">
									<view class="label">防控对象：</view>
									<view>{{detail.potion.fk_pest}}</view>
								</view>
								<view class="item">
									<view class="label">农业登记号：</view>
									<view>{{detail.potion.registration_No}}</view>
								</view>
								<view class="item">
									<view class="label">生产许可证：</view>
									<view>{{detail.potion.license_No}}</view>
								</view>
								<view class="item">
									<view class="label">农业标准号：</view>
									<view>{{detail.potion.standard_No}}</view>
								</view>
								<view class="item">
									<view class="label">药剂说明：</view>
									<view>{{detail.potion.potion_content}}</view>
								</view>
							</view>
						</view>
				
						<view class="detail-wrap m-b2">
							<view class="hd-title">包装照片</view>
							<view class="upload-pic-item">
								<view class="form-upload-pic">
									<view class="img-item" v-for="(item,index) in detail.files" :key="index">
										<image src="@/static/images/filter_bg.png" mode="widthFix" class="filter-bg">
											<!-- 占位 -->
										</image>
										<view class="img-wrap" @click="preview(index)">
											<image class="img" :src="img_path+item.file_path" mode="widthFix"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
						
						<view v-if="detail.fpInfo.length>0" class="detail-wrap m-b2">
							<view class="hd-title">分配总药剂量：{{detail.potion.fp_sum}} {{detail.specs.pack_name}}</view>
							<template v-if="detail.fpInfo.length>0">
								<view class="detail-item" v-for="(item,index) in detail.fpInfo" :key="index"> 
									<view class="detail-input">
										<view class="content">
											<view class="val">{{item.realname}}: {{item.potion_sum}}{{detail.specs.pack_name}}</view>
										</view>
									</view>
								</view> 
							</template>						
						</view>
						
						<view v-if="detail.fk.length>0" class="detail-wrap">
							<view class="hd-title">防控总用药量：{{detail.potion.fk_sum}} {{detail.specs.pack_name}}</view> 
							<template v-if="detail.fk.length>0">
								<view class="detail-item" v-for="(item,index) in detail.fk" :key="index"> 
									<view class="detail-input">
										<view class="content">
											<view class="val">第{{index+1}}次防控: {{item.potion_sum}}{{detail.specs.pack_name}}</view>
										</view>
									</view>
								</view> 
							</template>	
						</view>
						 
					</view>
					
					<!-- 底部 -->
					<view class="footer">
						<view class="fix-wrap btn-wrap">
							<view class="item-horizontal flex-grow-1 blue" @click="fp">
								<view class="icon">
									<view class="iconfont f-s40">&#xe616;</view>
								</view>
								<view class="name">药剂分配</view>
							</view>
							<view class="item-horizontal flex-grow-1 red" @click="fk">
								<view class="icon">
									<view class="iconfont f-s40">&#xe887;</view>
								</view>
								<view class="name">防控用药</view>
							</view> 
						</view>
					</view>		
				 
				</template>
			</template> 
		</template>

	</view>
</template>

<script>
	import loading from '@/components/loading-more.vue'
	import {img_path} from '@/config.js'
	import {previewImage} from '@/common/util.js'
	export default {
		name: 'demo',
		data() {
			return {
				type:'',
				isLogin: false,
				id: '',
				userInfo:uni.getStorageSync('userInfo'),
				fp_company:'',
				loadingState: {
					default: true,
				},
				detail: {},
				img_path:img_path, 
				isStop:true,
				params:{
					specs:{ },
					spec:{
						id:'',
						name:'',
						pack_name:''
					},
					num:''
				}
			}
		},
		onShow() {

		},
		async onLoad(params) {
			this.id = params.id;
			this.type=params.type;
			this.isLogin = await this.$loginState('check');
			this.fp_company=params.fp_company;
			if (this.isLogin) {
				if(this.type==1){
					this.getPotionDetail();
				} else if(this.type==3||this.type==2){
					this.getManageInfo();	
				}
							
			}
		},
		methods: {
			// 药剂详情
			getManageInfo: async function() {
				let res = await this.$api.ycj_api.getManageInfo({
					id: this.id
				})   
				if (res.data.ret == 0) {
					this.loadingState.default = false;
					console.log(res.data.data)
					this.detail = res.data.data;
				}
			},
			
			// 药剂管理详情
			getPotionDetail: async function() {
				let res = await this.$api.ycj_api.getPotionDetail({
					id: this.id
				})   
				if (res.data.ret == 0) {
					this.loadingState.default = false;
					console.log(res.data.data)
					this.detail = res.data.data;
				}
			},
			
			// 药剂采购
			getPotionInfo: async function() {
				let res = await this.$api.ycj_api.getPotionInfo({
					id: this.id
				}) 
				if (res.data.ret == 0) {
					this.loadingState.default = false;
					this.detail = res.data.data;
				}
			},
			
			
			
			// 图片预览
			preview:function(idx){				
				let img_list = [];
				this.detail.files.forEach(item => {
					img_list.push(this.img_path + item.file_path)
				})
				previewImage({
					index:idx,
					data:img_list
				})
			},
			
			// 切换规格
			changeSpecs:function(e){
				let idx=e.detail.value;
				this.params.specs=this.detail.specs[idx];
				this.params.spec.id=this.detail.specs[idx].id;
				this.params.spec.name=this.detail.specs[idx].spec;
				this.params.spec.pack_name=this.detail.specs[idx].pack_name;
			},
			
			fp:function(){
				let _this=this;
				let sum=this.detail.distribute.potion_sum-this.detail.potion.fp_sum-this.detail.potion.fk_sum;
				if(sum<=0){
					uni.showModal({
						content:"该药剂已经用完，是否采购药剂补充库存",
						cancelText:"暂不采购",
						confirmText:"立即采购",
						success(res) {
							if(res.confirm){
								uni.navigateTo({
									url:'/package_yaoji/buyYaoJi/buyYaoJi?id='+_this.detail.potion.id
								})
							}
						}
						
					}) 
				}else{
					uni.navigateTo({
						url:'/package_yaoji/fpYaoJi/fpYaoJi?potion_id='+this.detail.potion.id+'&pack_name='+this.detail.specs.pack_name+'&sum='+(this.detail.distribute.potion_sum-this.detail.potion.fp_sum-this.detail.potion.fk_sum)+'&specs_id='+this.detail.specs.id+'&distribute_id='+this.detail.distribute.id
					})
				}
			},
			
			fk:function(){
				let sum=this.detail.distribute.potion_sum-this.detail.potion.fp_sum-this.detail.potion.fk_sum;
				if(sum<=0){
					uni.showModal({
						content:"该药剂已经用完，是否采购药剂补充库存",
						cancelText:"暂不采购",
						confirmText:"立即采购",
						success(res) {
							if(res.confirm){
								uni.navigateTo({
									url:'/package_yaoji/buyYaoJi/buyYaoJi?id='+_this.detail.potion.id
								})
							}
						}
						
					}) 
				}else{
					uni.navigateTo({
						url:'/package_yaoji/fkYaoJi/fkYaoJi?potion_id='+this.detail.potion.id+'&distribute_id='+this.detail.distribute.id+'&pack_name='+this.detail.specs.pack_name+'&sum='+(this.detail.distribute.potion_sum-this.detail.potion.fp_sum-this.detail.potion.fk_sum)
					})
				}
			},
			
			// 采购
			buy:async function(){
				let _this=this;
				if(this.params.spec.name==''){
					uni.showToast({
						icon: 'none',
						title: '请选择药剂规格',
						mask: true,
						duration: 1000
					})
					return
				}
				if(this.params.num==''||this.params.num==0){
					uni.showToast({
						icon: 'none',
						title: '购买数量至少为1'+this.params.spec.pack_name,
						mask: true,
						duration: 1000
					})
					return
				}else if(!(/(^[1-9]\d*$)/.test(this.params.num))){
					uni.showToast({
						icon: 'none',
						title: '请输入正确的数量',
						mask: true,
						duration: 1000
					})
					return
				}
				
				if(this.isStop){
					this.isStop=false;
					uni.showLoading({
						title:"数据提交中..."
					})
					let res=await this.$api.ycj_api.addDistribute({
						potion_sum: this.params.num,
						specs_id: this.params.specs.id,
						specs: this.params.specs,
						potion_id: this.detail.potion.id,
						fid: 0,
						uid: this.userInfo.id,
						f_uid: this.userInfo.id
					}) 
					if(res.data.ret==0){
						uni.hideLoading();
						uni.showToast({
							icon: 'success',
							title: '药剂采购成功',
							mask: true,
							duration: 2000,
							success() {
								
								_this.$store.commit('UPDATE_MY_YAOJI',true);   
								setTimeout(()=>{
									_this.isStop=true;
									uni.navigateBack({
										delta:1
									})
								},2000)
							}
						})
					}else{
						uni.hideLoading();
						uni.showToast({
							icon: 'success',
							title: res.data.message,
							mask: true,
							duration: 1000
						})
					}
				}
				
			}
		},
		computed: {
			myYaoJi_sum_update(){  
				return this.$store.state.myYaojiSumUpdate;
			}
		},
		watch:{
			// 监听我的药剂库存更新
			myYaoJi_sum_update(newer,older){  
				if(newer!=older){	 
					this.getManageInfo(); 	
					 
				}
			}
			 
			
		},
		components: {
			loading
		}
	}
</script>

<style lang="less">
	.hd-title {
		padding: 20rpx 0 0 20rpx;
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.form-item{
		.link{
			color:#000!important;
		}
	}

	.info {
		padding: 20rpx 0 20rpx 20rpx;

		.item {
			display: flex;
			padding: 10rpx 0;
			font-size: 32rpx;
			color: #666;

			.label {
				flex-shrink: 0;
				width: 30%;
			}
		}
	}

	.detail-wrap {}
</style>
